<!--  -->
<template>
  <!--底部-->
  <footer class="common-footer">
    <ul>
      <li :class="{ active: act == 0 }">
        <router-link replace to="/">
          <div class="footer-icon">
            <svg class="xl-icon" aria-hidden="true">
              <use xlink:href="#icon-shouyetianchong"></use>
            </svg>
          </div>
          <p>首页</p>
        </router-link>
      </li>
      <li :class="{ active: act == 1 }">
        <router-link replace to="/cate">
          <div class="footer-icon">
            <svg class="xl-icon" aria-hidden="true">
              <use xlink:href="#icon-fenlei"></use>
            </svg>
          </div>
          <p>分类</p>
        </router-link>
      </li>
      <li :class="{ active: act == 2 }">
        <router-link replace to="/car">
          <div class="footer-icon">
            <svg class="xl-icon" aria-hidden="true">
              <use xlink:href="#icon-gouwucheman"></use>
            </svg>
          </div>
          <p>购物车</p>
        </router-link>
      </li>
      <li :class="{ active: act == 3 }">
        <router-link replace to="/my">
          <div class="footer-icon">
            <svg class="xl-icon" aria-hidden="true">
              <use xlink:href="#icon-wode-wode"></use>
            </svg>
          </div>
          <p>我的</p>
        </router-link>
      </li>
    </ul>
  </footer>
</template>

<script>
export default {
  name: "xl-footer",
  props: {
    act: {
      default: 0,
    },
  },
};
</script>
<style lang='scss'>
.common-footer {
  width: 100%;
  max-width: 750px;
  height: 55px;
  text-align: center;
  background-color: #39435b;
  position: fixed;
  bottom: -1px;
  left: 0;
  right: 0;
  margin: auto;
  padding: 5px 0;
  box-shadow: 0 -1px 1px rgba(128, 128, 128, 0.5);

  ul {
    display: flex;
    justify-content: space-around;
  }
  li {
    width: 46px;
    text-align: center;

    margin: 0 4.8%;

    .footer-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 46px;
      height: 30px;
    }

    .xl-icon {
      font-size: 24px;
    }
  }
  li a {
    display: block;
    color: #e1e5ee;
    width: 100%;
    height: 100%;
  }

  li.active a {
    color: #5bb2ff;
  }
}
</style>